<ng-container>
  <!-- 页头 -->
  <page-header-wrapper [title]="'员工详情'" [logo]="logo" [content]="content">
    <ng-template #logo>
      <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
        <i nz-icon nzType="left" nzTheme="outline"></i>
      </button>
    </ng-template>
    <ng-template #content>
      <nz-skeleton [nzLoading]="service.http.loading">
        <div class="user-info" nz-row>
          <div nz-col nzSpan="24" class="d-flex">
            <img [src]="userDetail?.avatar" />
            <div style="flex: 1;">
              <div nz-row>
                <div nz-col [nzLg]="12" [nzSm]="24" [nzXs]="24">
                  <p style="margin-bottom: 0;">{{ userDetail?.name }}
                    <nz-badge nzStatus="success" nzText="正常" *ngIf="!userDetail?.stateLocked" class="ml-sm"></nz-badge>
                    <nz-badge nzStatus="error" nzText="冻结" *ngIf="userDetail?.stateLocked" class="ml-sm"></nz-badge>
                  </p>
                </div>
              </div>
              <div nz-row>
                <div nz-col [nzLg]="8" [nzSm]="24" [nzXs]="24">
                  <p>手机号：{{ userDetail?.phone }}</p>
                </div>
                <div nz-col [nzLg]="8" [nzSm]="24" [nzXs]="24">
                  申请时间：{{userDetail?.createTime}}
                </div>
                <div nz-col [nzXl]="8" [nzLg]="8" [nzSm]="24" [nzXs]="24" class="d-flex"
                  style="justify-content: flex-end;padding-right: 24px;">
                  <button *ngIf="userDetail?.stateLocked" [nzLoading]="service.http.loading" nz-button nzType="primary"
                    nzGhost (click)="userAction(1)" acl [acl-ability]="['USERCENTER-FREIGHT-USER-D-lock']">
                    启用
                  </button>
                  <button *ngIf="!userDetail?.stateLocked" [nzLoading]="service.http.loading" nz-button nzDanger nzGhost
                    (click)="userAction(0)" acl [acl-ability]="['USERCENTER-FREIGHT-USER-D-lock']">
                    冻结
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nz-skeleton>
    </ng-template>
  </page-header-wrapper>

  <nz-card [nzLoading]="service.http.loading" [nzBorderless]="true" style="height: 100%;">
    <div class="mb-md">
      <div class="font-weight-blod text-md detail-title" style="justify-content: space-between;">
        <div>
          <a class="sign"></a>
          <span>个人信息</span>
          <label *ngIf="userIdentityDetail?.certificationStatus===1" style="color: #52c41a;"><i nz-icon
              nzType="check-circle" nzTheme="fill" class="mr-xs"></i>审核通过
          </label>
          <label *ngIf="userIdentityDetail?.certificationStatus===2" style="color: #ff4d4f;"><i nz-icon
              nzType="close-circle" nzTheme="fill" class="mr-xs"></i>驳回
          </label>
        </div>
        <div>
          <ng-container *ngIf="isEditUser; else elseTemplate">
            <button [nzLoading]="service.http.loading" nz-button (click)="reset()">
              取消
            </button>
            <button [nzLoading]="service.http.loading" nz-button nzDanger (click)="saveUser()">
              保存
            </button>
          </ng-container>
          <ng-template #elseTemplate>
            <button nz-button nzType="default" nzDanger (click)="auditPass()"
              *ngIf="userIdentityDetail.certificationStatus===0" [nzLoading]="service.http.loading" acl
              [acl-ability]="['USERCENTER-FREIGHT-USER-D-audit']">审核通过</button>
            <button nz-button nzType="default" nzDanger (click)="auditNo()"
              *ngIf="userIdentityDetail.certificationStatus===0" [nzLoading]="service.http.loading" acl
              [acl-ability]="['USERCENTER-FREIGHT-USER-D-audit']">驳回审核</button>
            <button nz-button nzType="default" nzDanger (click)="ratify()" acl
              [acl-ability]="['USERCENTER-FREIGHT-USER-D-edit']">修改</button>
          </ng-template>
        </div>
      </div>
      <sv-container col="2">
        <!-- <sv-title>个人信息
        <label *ngIf="userIdentityDetail?.certificationStatus===1" style="color: #52c41a;"><i nz-icon
            nzType="check-circle" nzTheme="fill" class="mr-xs"></i>审核通过
        </label>
        <label *ngIf="userIdentityDetail?.certificationStatus===2" style="color: #ff4d4f;"><i nz-icon
            nzType="close-circle" nzTheme="fill" class="mr-xs"></i>驳回
        </label>
        <div style="float: right;">
          <ng-container *ngIf="isEditUser; else elseTemplate">
            <button [nzLoading]="service.http.loading" nz-button (click)="reset()">
              取消
            </button>
            <button [nzLoading]="service.http.loading" nz-button nzDanger (click)="saveUser()">
              保存
            </button>
          </ng-container>
          <ng-template #elseTemplate>
            <button nz-button nzType="default" nzDanger (click)="auditPass()"  *ngIf="userIdentityDetail.certificationStatus===0" [nzLoading]="service.http.loading" acl  [acl-ability]="['USERCENTER-FREIGHT-USER-D-audit']">审核通过</button>
            <button nz-button nzType="default" nzDanger (click)="auditNo()"
              *ngIf="userIdentityDetail.certificationStatus===0" [nzLoading]="service.http.loading" acl  [acl-ability]="['USERCENTER-FREIGHT-USER-D-audit']">驳回审核</button>
            <button nz-button nzType="default" nzDanger (click)="ratify()"  acl [acl-ability]="['USERCENTER-FREIGHT-USER-D-edit']" >修改</button>
          </ng-template>
        </div>
      </sv-title> -->
        <sv label="姓名">
          <input nz-input type="text" [maxlength]="32" [(ngModel)]="userIdentityDetail.name" [readonly]="!isEditUser"
            [nzBorderless]="!isEditUser" [placeholder]="isEditUser?'':'-'">
        </sv>
        <sv label="身份证号码">
          <input nz-input type="text" [minlength]="18" [maxlength]="18"
            [(ngModel)]="userIdentityDetail.certificateNumber" [readonly]="!isEditUser" [nzBorderless]="!isEditUser"
            [placeholder]="isEditUser?'':'-'">
        </sv>
        <sv label="有效期" col="1">
          <nz-date-picker [(ngModel)]="userIdentityDetail.validStartTime" [nzDisabled]="!isEditUser" nzPlaceHolder=" "
            [nzBorderless]="!isEditUser" [nzSuffixIcon]="isEditUser?'calendar':''" style="width: 130px;"
            class="calendar">
          </nz-date-picker>
          -
          <ng-container *ngIf="!isEditUser && !userIdentityDetail?.validEndTime && userIdentityDetail?.validStartTime">
            <label style="padding-left: 11px;">长期</label>
          </ng-container>
          <nz-date-picker [(ngModel)]="userIdentityDetail.validEndTime" [nzDisabled]="!isEditUser" nzPlaceHolder=" "
            [nzBorderless]="!isEditUser" [nzSuffixIcon]="isEditUser?'calendar':''" style="width: 130px;"
            class="calendar">
          </nz-date-picker>
          <ng-container *ngIf="isEditUser">
            <label nz-checkbox [ngModel]="!!!userIdentityDetail.validEndTime"
              (ngModelChange)="$event?userIdentityDetail.validEndTime='':''" class="ml-sm">长期</label>
          </ng-container>
        </sv>
        <sv label="身份证照" col="1">
          <div class="d-flex">
            <ng-container
              *ngTemplateOutlet="uploadTemplate;context:{data:userIdentityDetail,status:isEditUser,key:'certificatePhotoFrontWatermark',key2:'certificatePhotoFront',hover:'certificateBackFront'}">
            </ng-container>
            <ng-container
              *ngTemplateOutlet="uploadTemplate;context:{data:userIdentityDetail,status:isEditUser,key:'certificatePhotoBackWatermark',key2:'certificatePhotoBack',hover:'certificateBack'}">
            </ng-container>
          </div>
        </sv>
      </sv-container>
    </div>

    <div class="mb-md">
      <div class="font-weight-blod text-md detail-title">
        <a class="sign"></a>
        <span>关联企业</span>
      </div>

      <!-- <sv-title>关联企业</sv-title> -->
      <st #st [columns]="columns" [data]="service.$api_get_driver_projects" size="small"
        [req]="{ method: 'POST', allInBody: true, params: {appUserId:route.snapshot.params.id} }"
        [res]="{ reName: { list: 'data' } }" [page]="{ show: false }" style="width: 100%;">
      </st>

    </div>
  </nz-card>
</ng-container>

<ng-template #redectModal>
  <div nz-row nzGutter="8">
    <div nz-col nzSpan="24" se-container [labelWidth]="120">
      <se [col]="1" label="姓名">
        {{ userIdentityDetail?.name }}
      </se>
      <se [col]="1" label="备注" required>
        <textarea nz-input rows="3" style="width: 325px;margin-left: 14px;" [(ngModel)]="approvalOpinion"></textarea>
      </se>
      <se [col]="1" label="可选理由">
        <nz-tag *ngFor="let tag of reasonTags" nzColor="default" nzMode="checkable"
          (nzCheckedChange)="approvalOpinion=approvalOpinion+'、'+tag">
          {{ tag }}
        </nz-tag>
      </se>
    </div>
  </div>
</ng-template>


<ng-template #uploadTemplate let-data="data" let-status="status" let-key="key" let-key2="key2" let-hover="hover">
  <nz-upload class="avatar-uploader" [nzAction]="uploadURl" nzName="multipartFile" nzListType="picture-card"
    [nzShowUploadList]="false" nzFileType="image/png,image/jpeg,image/jpg,image/gif"
    [nzDisabled]="!status || disabledUpload" (nzChange)="changeUpload($event,data,key,key2)">
    <ng-container *ngIf="!data[key] && status">
      <i class="upload-icon" nz-icon [nzType]="false ? 'loading' : 'plus'"></i>
      <div class="ant-upload-text">上传</div>
    </ng-container>
    <div *ngIf="data[key]" (mouseover)="data[hover]=true" (mouseleave)="data[hover]=false"
      (click)="$event.cancelBubble=true" class="image-hover">
      <img [src]="data[key]" style="width: 200px;height: 160px;" (click)="showImg(data[key])" />
      <div class="mask" *ngIf="data[hover] && status"></div>
      <div class="mask-over" *ngIf="data[hover] && status">
        <i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(data,key,key2)"></i>
        <div style="display: flex;align-items: center;">
          <i nz-icon nzType="eye" nzTheme="fill" class="show-icon" (click)="showImg(data[key])"></i>
        </div>
      </div>
    </div>
  </nz-upload>
</ng-template>
